<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="layui/css/layui.css">
		<title>数据字典管理</title>
	</head>

	<body>
		<div class="layui-elem-quote layui-bg-gray">
			<span class="layui-breadcrumb">
	           <a href="">首页</a>
	           <a href=""><span class="layui-icon layui-icon-spread-left"></span>基础信息管理</a>
			<a href=""><span class="layui-icon layui-icon-spread-left"></span>数据字典管理</a>
			</span>
		</div>
		<div>
			<form class="layui-form">
				<div class="layui-inline">
					<label class="layui-form-label">字典项目：</label>
					<div class="layui-input-inline">
						<input type="text" id="" class="layui-input" />
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">所属类别：</label>
					<div class=layui-input-inline>
						<select id="selectId" lay-verify="required">
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<a href="" class="layui-btn"><span class="layui-icon layui-icon-search"></span>搜索Search</a>
					</div>
				</div>
			</form>
		</div>
		<div class="layui-row">
			<a href="javascript:addData();" class="layui-btn layui-btn-success">添加</a>
			<a href="javascript:deleteData();" class="layui-btn layui-btn-success">删除</a>
			<table class="layui-table">
				<colgroup>
					<col width="150">
					<col width="200">
					<col>
				</colgroup>
				<thead>
					<tr>
						<th>编号</th>
						<th>邮箱</th>
					</tr>
				</thead>
				<tbody id="tbodyId">
					<tr>
						<td>贤心</td>
						<td>2016-11-29</td>
						<td>人生就像是一场修行</td>
					</tr>
					<tr>
						<td>许闲心</td>
						<td>2016-11-28</td>
						<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
					</tr>

				</tbody>
			</table>
		</div>
		<script type="text/html" id="buttonTpl">
			<a class="layui-btn layui-bg-blue layui-btn-xs" lay-event="detail">编辑</a>
			<a class="layui-btn layui-bg-yellow layui-btn-xs" lay-event="detail">删除</a>
		</script>
		</div>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="layui/layui.all.js"></script>
		<script src="layui/layui.all.js"></script>
		<script src="js/myMock.js"></script>
		<script>
			layui.use(['element', 'form'],
				function() {
					var element = layui.element;
					var laypage = layui.laypage;
					var form = layui.form;

					$(function() {
						$.ajax({
							type: "get",
							url: "dataJSON/selectDict.json",
							success: function(result) {
								var seoption = "";
								$.each(result.select, function(index, value) {
									seoption += "<option>" + value + "</option>";
								})
								$("#selectId").append(seoption);
								form.render();
							}
						});
					})

				});
		</script>
		<script type="text/javascript">
			$(function() {
				getData();
			})

			function getData() {
				$.ajax({
					url: 'findDict',
					type: 'get',
				}).done(function(data, status, jqXHR) {
					dataObj = JSON.parse(data);
					$('#tbodyId').empty();
					$.each(dataObj.list, function(index, value) {
						var tr = $('<tr><td>' + value.id + '</td><td>' + value.email + '</td></tr>');
						$('#tbodyId').append(tr);
					});
				})
			}

			function deleteData() {
				$(function() {
					$.ajax({
						url: 'deleteDict',
						type: 'delete',
						data: {
							'id': 2
						}
					}).done(function(data, status, jqXHR) {
						getData();
					})
				})

			}

			function addData() {
				obj = {
					'id': 4,
					'email': 'aaaaaa'
				}
				$(function() {
					$.ajax({
						url: 'addDict',
						type: 'post',
						data: {
							email: 'bbbbbb'
						}
					}).done(function(data, status, jqXHR) {
						getData();
					})
				})
			}
		</script>
	</body>

</html>